body {
  font-family: $font-family-sans-serif;
  font-weight: $font-family-sans-serif-weight;
  margin: 0;
  padding: 0;
  line-height: 2;
}

::selection {
  color: #fff;
  background: $selection-bg;
}

a {
  color: $color.link;
  text-decoration: none;
  transition: color 0.1s;

  &:hover, &:focus {
    color: $colors.danger;
  }

  &:active {
    color: mix(black, $color.link, 50%);
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
}

$--head-font-size-base = 1rem !default;
$--head-font-size-step = 0.3rem !default;

h1 {
  font-size: $--head-font-size-base + 5 * $--head-font-size-step;
  font-weight: $font-family-sans-serif-weight;
}

h2 {
  font-size: $--head-font-size-base + 4 * $--head-font-size-step;
  font-weight: $font-family-sans-serif-weight;
}

h3 {
  font-size: $--head-font-size-base + 3 * $--head-font-size-step;
  font-weight: $font-family-sans-serif-weight;
}

h4 {
  font-size: $--head-font-size-base + 2 * $--head-font-size-step;
  font-weight: $font-family-sans-serif-weight;
}

h5 {
  font-size: $--head-font-size-base + $--head-font-size-step;
  font-weight: $font-family-sans-serif-weight;
}

h6 {
  font-size: $--head-font-size-base;
}

button {
  outline: none;
}

p {
  font-size: inherit;
  font-weight: inherit;

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

hr {
  opacity: 0.2;
  margin: 1rem;
}